<template>
    <div><h2>{{demo}}</h2></div>
    <DemoComponent/>
    
    <div class="demo"> 
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{age}}</h3>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看电话</button>
    </div>
    <div class="demo1"> 
        <h3>姓名：{{name1}}</h3>
        <h3>年龄：{{age1}}</h3>
        <button @click="changeName1">修改名字</button>
        <button @click="changeAge1">修改年龄</button>
        <button @click="showTel1">查看电话</button>
    </div>
</template>

<script lang="ts">
import DemoComponent from '../../components/DemoComponent.vue';

export default {
    name: 'Demo',
    components: {
        DemoComponent  //注册组件
    },

    data(){ 
    return { 
        name: "张三",
        age: 18,
        tel:  "12345678901"      
        }
    },
    methods: { 
        showTel() {
            alert(this.tel)
        },
        changeName() {
            this.name = "张三丰"
        },
        changeAge() {
            this.age +=1
        }
    },
    //vue3.0的写法
    setup() { 
        //数据
        let name1 = "张三"; //此时name1不是响应式
        let age1 = 18;
        let tel1 = "12345678901";
        //方法
        function showTel1() {
            alert(tel1)
        }
        function changeName1() {
            name1 = "张四丰"
        }
        function changeAge1() {
            age1 +=1
        }
        return { name1,age1,changeName1,changeAge1,showTel1}

    }
    
}   

</script>

<style>
    .demo {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 300px;
        margin: 10px;
    }
    button  { 
        margin: 0 0 5px;
    }
    .demo1 {
        background-color: orange;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 300px;
        margin: 10px;
    }    
</style>